<template>
  <div class="header">
    <img :src="userInfo.avatar">
    <div class="edit">
      <div class="acountTop">
        <div class="acountLeft">
          <span class="acountNumber">{{ userInfo.name }}</span>
        </div>
        <div class="acountRight">
          <button><i>编辑个人资料</i></button>
        </div>
      </div>
      <div class="acountBoottom">
        <div class="tinyLeftBox" @click="to('/user/event')">
          <strong>{{ userInfo.evens }}</strong>
          <span>动态</span>
        </div>
        <div class="tinyCenterBox" @click="to('/user/follows')">
          <strong>{{ userInfo.follows }}</strong>
          <span>关注</span>
        </div>
        <div class="tinyBottomBox" @click="to('/user/fans')">
          <strong>{{ userInfo.fans }}</strong>
          <span>粉丝</span>
        </div>
      </div><br><br><br><br>
      <div class="bottomText">
        <span>所在地区：{{ userInfo.position }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    to(path) {
      this.$router.push({
        path: `${path}/${this.userInfo.id}`
      })
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  width: 900px;
  height: 188px;
  // background: rgb(87, 177, 255);
  margin: 0 auto;
  padding-top: 36px;
  margin-bottom: 43px;

  img {
    width: 180px;
    height: 180px;
    padding: 3px;
    background: #fff;
    display: block;
    float: left;
    border: 1px solid #d5d5d5;
  }

  .edit {
    width: 670px;
    height: 171px;
    float: right;

    // background: yellow;
    .acountTop {
      width: 670px;
      height: 52px;
      border-bottom: 1px solid rgb(206, 206, 206);
    }

    .acountLeft {
      float: left;

      .acountNumber {
        margin-top: 3px;
        font-size: 22px;
        font-weight: normal;
        line-height: 30px;
      }
    }

    .acountRight {
      float: right;

      button {
        color: #333;
        padding: 0 5px 0 0;
        border: 1px solid #CDCDCD;
        border-radius: 3px;
        cursor: pointer;

        i {
          color: #333;
          padding: 0 10px 0 10px;
          pointer-events: none;
          height: 25px;
          line-height: 25px;
          text-align: center;
        }

        &:hover {
          background-color: #fff;
        }
      }
    }

    .img_Vip {
      width: 25px;
      height: 25px;
      float: left;
    }

    .acountBoottom {
      padding-top: 10px;
      cursor: pointer;

      .tinyLeftBox,
      .tinyCenterBox,
      .tinyBottomBox {
        width: 66px;
        height: 40px;
        border-right: 1px solid rgb(206, 206, 206);
        float: left;
        text-align: center;

        strong {
          display: block;
          font-size: 24px;
        }

        span {
          display: block;
          width: 100%;
        }

        &:hover {
          color: #0c73c2 !important;
        }
      }

      .tinyBottomBox {
        border-right: none !important;
      }
    }

    .bottomText {
      span {
        line-height: 21px;
        color: #666;
      }
    }
  }
}
</style>